<template>
  <div>
    <Searchbar>
      <el-input style="margin-right: 10px" @change="getList" v-model="search.id" placeholder="请输入实验环境ID"></el-input>
      <el-input style="margin-right: 10px" @change="getList" v-model="search.environment_name" placeholder="请输入实验环境名称"></el-input>
      <el-input style="margin-right: 10px" @change="getList" v-model="search.image_name" placeholder="请输入镜像名称"></el-input>
<!--      <el-input @change="getList" v-model="search.subnet_name" placeholder="请输入子网名称"></el-input>-->

<!--      <el-select v-model="search.is_open" placeholder="请选择连接外网">-->
<!--        <el-option-->
<!--          v-for="item in is_open_status"-->
<!--          :key="item.value"-->
<!--          :label="item.label"-->
<!--          :value="item.value"-->
<!--        ></el-option>-->
<!--      </el-select>-->

      <el-button @click="getList" type="primary">查询</el-button>
    </Searchbar>

    <el-table :data="tableData" style="width: 100%">
<!--      <el-table-column fixed="left" type="index" width="55">序号</el-table-column>-->
      <el-table-column fixed="left" type="index" width="55" label="序号"></el-table-column>

      <el-table-column prop="id" label="实验环境ID"></el-table-column>

      <el-table-column prop="environment_name" label="实验环境名称"></el-table-column>

      <el-table-column prop="images" label="镜像名称"></el-table-column>

<!--      <el-table-column prop="subnet_name" label="子网名称"></el-table-column>-->

<!--      <el-table-column prop="cidr_block" label="网段"></el-table-column>-->

      <el-table-column prop="isOpenStat" label="是否连接外网"></el-table-column>

      <el-table-column prop="create_time" label="创建时间"></el-table-column>
      <el-table-column prop="live_ins_count" label="存活实例"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="onShowDetail(scope.row)"
            type="primary"
            size="small"
          >查看详情</el-button>
<!--          <el-button @click="onSend(scope.row)" size="small" class="text-orange">下发实情</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <IssueEnv :visible="dialogVisible" @onClose="onClose" :env_id="issue_env_id"  />
    <el-pagination
      background
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change=handleSizeChange
      :current-page.sync="search.page"
      :page-size="search.page_size"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import pageMixin from "@/mixins/pageMixin";
import { experimentModel } from "@/api/admin_models";
import Searchbar from "@/components/Searchbar";
import openStatus from '@/common/is_open_status.js'
import issueEnv from '@/mixins/issueEnv.js';
export default {
  mixins: [pageMixin, issueEnv],
  components: { Searchbar},
  data() {
    return {
      tableData: [],
      total: 0,
      is_open_status: openStatus.status,
      search: {
        id: null,
        environment_name: null,
        image_name: null,
        subnet_name: null,
        is_open_status: null,
        selectedknowledge_id: null,
        page: 1,
        page_size: 10
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onShowDetail(row) {
      this.$router.push('/env/' + row.id)
    },
    onIssue() {
      console.log("onIssue");
    },
    getList() {
      console.log("getList");
      experimentModel.envs(
        this.search,
        res => {
          this.total = res.total_records;
          this.tableData = res.data.map(v => {
            v.isOpenStat = v.is_open == 1 ? '是' : '否'
            return v;
          });
        },
        err => {
          console.log(err);
        }
      );
    }
  }
};
</script>
<style lang="scss">
</style>